import router from '@src/router'
import {
  getInvoiceTitle
} from "@src/api/invoice";

import {
  emailTest,
  checkMobile,
  numberTest,
  _debounce
} from "@src/common/utils"
import {
  storeBindingsBehavior
} from "mobx-miniprogram-bindings";
import base from "@src/store/base";

//Component Object
Component({
  behaviors: [storeBindingsBehavior],
  storeBindings: [{
    store: base,
    fields: ['themeColor', 'themeTitleColor']
  }],
  data: {
    flag: false,
    isShowRise: false,
    formData: {
      fapiaoAmt: null, // 开票金额
      titleType: '1', // 发票类型
      email: '', // 邮箱
      title: null, // 抬头
      taxNum: null, // 税号
      phone: null, // 电话号码
      companyAddress: null, //公司地址
      bankName: null, //开户银行
      bankAccount: null, //银行账户
      businessId: null,
      oriOrderNo: null,
      remark: null,
      totOrderNumber: null
    },
    popup: false, //开票信息弹窗
    company: true, //企业
    person: false, //个人
    isSubmit: false, // 是否可以提交
    orderNo: [], // 预留后期可以开多张发票
    businessId: null,
    shopId: null,
    invoiceTitle: [], // 抬头和税号
    key: null,
    title: null,
    numLenght: '11'
  },
  observers: {
    'formData.**'() {
      const {
        company,
        person,
        formData: {
          email,
          title,
          taxNum
        }
      } = this.data
      this.setData({
        isSubmit: (company && email && title && taxNum) || (person && email && title)
      })

    },
    company(v) {
      this.setData({
        ['formData.titleType']: v ? '1' : '2'
      })
    }
  },
  methods: {
    isShrink(e) {
      this.setData({
        flag: !this.data.flag
      })
    },
    changeRadio(e) {
      this.setData({
        company: e.currentTarget.dataset.name === 'company',
        person: e.currentTarget.dataset.name === 'person',
        ['formData.email']: '',
        ['formData.title']: null,
        ['formData.taxNum']: null,
        ['formData.phone']: null,
        ['formData.companyAddress']: null,
        ['formData.bankName']: null,
        ['formData.bankAccount']: null,
        ['formData.remark']: null,
      })
    },
    bindTextAreaBlur(e) {
      console.log(e.detail.value)
    },
    bindKeyInput(e) {
      const {
        value
      } = e.detail
      const {
        num,
        key
      } = e.currentTarget.dataset
      this.setData({
        [key]: value
      })
      num === '1' && this.setData({
        [key]: value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5\@\.]/g, '') // 只能输入中文、英文、数字、@符号和.符号
      })
      num === '2' && this.data.company && this.getInvoiceTitle(value)
      num === '3' && this.setData({
        [key]: value.replace(/[\W]/g, '') // 只能输入英文字母和数字
      })
      if (num === '4') {
        const pattern = /[-]+/
        this.setData({
          [key]: value.replace(/[^\d^-]+/g, ''), // 只能输入数字和-
          numLenght: pattern.test(value) ? '12' : '11'
        })
      }
      num === '6' && this.setData({
        [key]: value.replace(/[^\u4E00-\u9FA5]/g, '') // 只能输入汉字
      })
      const numArr = ['7']
      numArr.indexOf(num) > -1 && this.setData({
        [key]: value.replace(/[^\d]/g, '') // 只能输入数字
      })

    },
    // 选择发票抬头
    clickRise(e) {
      const {
        flag,
        params = {}
      } = e.currentTarget.dataset

      flag === '1' && this.setData({
        isShowRise: false
      })
      flag === '2' && this.setData({
        isShowRise: false,
        ['formData.title']: params?.enterpriseName,
        ['formData.taxNum']: params?.taxpayerNum
      })
    },
    submit() {
      const {
        isSubmit,
        formData: {
          email,
          phone,
          bankAccount
        }
      } = this.data
      if (!isSubmit) return
      if (!emailTest(email)) {
        wx.showToast({
          title: '请输入正确的电子邮箱',
          icon: 'none',
          duration: 2000
        })
        return false
      }
      if (phone && !checkMobile(phone)) {
        wx.showToast({
          title: '请输入正确的号码',
          icon: 'none',
          duration: 2000
        })
        return false
      }
      if (bankAccount && !numberTest(bankAccount)) {
        wx.showToast({
          title: '请输入正确的银行账户',
          icon: 'none',
          duration: 2000
        })
        return false
      }
      this.setData({
        popup: true
      }) 
    },
    onPopup(e) {
      console.log('onPopup', e.detail);
      this.setData({
        popup: e.detail
      })
    },
    emptyFunction(e) {
      const num = e.currentTarget.dataset.num
      const value = e.detail.value
      if (num === '1' && value && !emailTest(value)) {
        this.setData({
          isSubmit: false
        })
        wx.showToast({
          title: '请输入正确的电子邮箱',
          icon: 'none',
          duration: 2000
        })
      }
      if (num === '3' && value && value.length < 15) {
        this.setData({
          isSubmit: false
        })
        wx.showToast({
          title: '请输入正确的纳税号码',
          icon: 'none',
          duration: 2000
        })
      }
      if (num === '4' && value && !checkMobile(value)) {
        this.setData({
          isSubmit: false
        })
        wx.showToast({
          title: '请输入正确的号码',
          icon: 'none',
          duration: 2000
        })
      }
      if (num === '6' && value && value.length < 4) {
        this.setData({
          isSubmit: false
        })
        wx.showToast({
          title: '请输入正确的开户银行',
          icon: 'none',
          duration: 2000
        })
      }
      if (num === '7' && value && !numberTest(value)) {
        this.setData({
          isSubmit: false
        })
        wx.showToast({
          title: '请输入正确的银行账户',
          icon: 'none',
          duration: 2000
        })
      }

    },
    clearText(e) {
      const key = e.currentTarget.dataset.key
      this.setData({
        [key]: '',
        isShowRise: false
      })
    },

    onLoad(options) {
      if (options.key) {
        wx.setNavigationBarTitle({
          title: '变更信息'
        })
        const eventChannel = this.getOpenerEventChannel()
        eventChannel.on('key', (formData) => {
          formData.fapiaoId = formData.id
          this.setData({
            formData,
            businessId: formData.businessId,
            shopId: formData.shopId,
            company: formData.titleType === 1,
            person: formData.titleType === 2,
          })
        })
        return
      }
      this.setData({
        ['formData.fapiaoAmt']: options.money,
        ['formData.businessId']: Number(options.businessId),
        ['formData.oriOrderNo']: options.orderNo,
        ['formData.totOrderNumber']: Number(options.goodsTotNum),
        businessId: Number(options.businessId),
        orderNo: options.orderNo.split('%2C'),
        shopId: Number(options.shopId),
      })


    },

    getInvoiceTitle: _debounce(
      function (e) {
        if (!e) return this.setData({
          isShowRise: false
        })
        e && getInvoiceTitle({
          shopId: this.data.shopId,
          businessId: this.data.businessId,
          title: e
        }).then(res => {
          if (res.code === 0) {
            this.setData({
              invoiceTitle: res.data,
              isShowRise: true
            })
          }
        }).catch(err => {
          console.log(err);
        })
      }, 100
    )
  },
});